//1. 引入vue和vuex
import Vue from "vue";
import Vuex from "vuex";
import axios from 'axios'

//2. 使用vuex插件
Vue.use(Vuex);

//3.实例化一个vuex仓库,并暴露
//4. 给仓库传入配置(state mutations actions getters modules)
export default new Vuex.Store({
    state: {
        count: 0,
        movieList: [],
    },
    /* 
      更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
      Vuex 中的 mutation 非常类似于事件：每个mutations都有一个字符串的 事件类型 和一个 回调函数（handler）
      mutations函数会接受 state 作为第一个参数
    */
    mutations: {
        increment(state, payload) {
            state.count += payload.n
        },
        setMovieList(state, payload) {
            state.movieList = payload.movieList
        },
    },
    actions: {
        async getMovieList({ commit }) {
            const result = await axios.get("https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
            );
            commit('setMovieList', { movieList: result.data.data.list })
        }
    },
    getters: {
        movieName3_6(state) {
            return state.movieList.filter((item) => {
                return item.name.length > 2 && item.name.length < 7
            })
        }
    },
});
